<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            background-color: pink;
            /*border: 1px solid #000;*/
            padding: 10px;
        }
    </style>
</head>
<body>

    <div style="width: 100px;height: 100px;"></div>


    <script>

        //赋值：div.style.....
        var div = document.getElementsByTagName("div")[0];
        div.style.width = "1000px";


        //获取值：
        console.log(div.offsetWidth);
        console.log(div.style.width);
        console.log(div.style.border);

        //获取行内式和内嵌式
//        console.log(typeof window.getComputedStyle(div,null));
//        console.log(window.getComputedStyle(div,null).border);
//        console.log(window.getComputedStyle(div,null)["background-color"]);

//        console.log(div.currentStyle.padding);
//        console.log(div.currentStyle["background-color"]);


        console.log(getStyle(div,"padding-left"));
        console.log(getStyle(div,"background-color"));


        //兼容方法获取元素样式
        function getStyle(ele,attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }



    </script>


</body>
</html>